<template>
  <div class="app-content">
    <div class="app-content--heard">
      <img class="heard--left__img" src="../assets/prev.png" alt="" @click="huitui">
      <span class="heard--text">爆款秒杀</span>
    </div>
    <div>
    <div class="app-content--heard__img">
      <img src="../assets/slike.png" alt="">
    </div>
    <div class="Explosive">
      <span>抢购中</span>
      <span>即将开抢</span>
    </div>
      <div class="block"></div>
      <div class="time">
        <span>本场还剩</span>
        <span>16</span>
        <span>:</span>
        <span>19</span>
        <span>:</span>
        <span>16</span>
      </div>
      <div class="body">
        <img src="" alt="" class="body--img">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "Limitedtime",
  data(){
    return{
      arr: [],
    }
  },
  methods: {
    huitui(){
      this.$router.go(-1);
    }
  },
  created() {
  }
}
</script>

<style scoped>
  .app-content{
    width: 100vw;
    height: 100vh;
  }
  .app-content--heard{
    width: 100vw;
    height: 94px;
    background: white;
    position: fixed;
  }
  .heard--left__img{
    width: .5rem;
    height: .5rem;
    position: absolute;
    left: .4rem;
    top: .3rem;
  }
  .heard--text{
    display: inline-block;
    font-size: 32px;
    width: 150px;
    height: 94px;
    text-align: center;
    line-height: 80px;
    color: #2e2e2e;
    margin-left: 315px;
  }
  .app-content--heard__img>img{
    display: inline-block;
    width: 100vw;
    height: 357px;
    margin-top: 90px;
  }
  .Explosive{
    width: 100vw;
    height: 120px;
    font-size: 0;
  }
  .Explosive>span:nth-child(1) {
     display: inline-block;
     width: 50vw;
     line-height: 120px;
     text-align: center;
     font-size: 34px;
   }
  .Explosive>span:nth-child(2) {
    display: inline-block;
    width: 50vw;
    line-height: 120px;
    text-align: center;
    font-size: 34px;
  }
  .block{
    width: 100vw;
    height: 14px;
    background: #fafafa;
  }
  .time{
    width: 100vw;
    line-height: 107px;
    text-align: center;
    border-bottom: 1px solid #fafafa;
  }
  .time>span:nth-child(1){
    display: inline-block;
    font-size: 36px;
    color: #fd932e;
    margin-left: 20px;
    vertical-align: middle;
  }
  .time>span:nth-child(2){
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #222222;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 45px;
    border-radius: 5px;
    vertical-align: middle;
  }
  .time>span:nth-child(3){
    display: inline-block;
    font-size: 28px;
    vertical-align: middle;
  }
  .time>span:nth-child(4){
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #222222;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 45px;
    vertical-align: middle;
  }
  .time>span:nth-child(5){
    display: inline-block;
    font-size: 28px;
    vertical-align: middle;
  }
  .time>span:nth-child(6){
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #222222;
    color: white;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    line-height: 45px;
    border-radius: 5px;
  }
  .body{
    width: 100vw;
    height: 313px;
  }
  .body--img{
    display: inline-block;
    width: 216px;
    height: 188px;
  }
</style>
